@import 'public.css';
@import 'http://at.alicdn.com/t/font_au47lxxydrla0pb9.css';

$headFontColor: #fcc800;
$zhutiColor: #82b541;

$tubHover: #5b9910;



.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0} 
.clearfloat{zoom:1} 
.centerCon{
	width: 1160px;
	margin:0 auto ;
	position: relative;
}

section#goTop{
	position: fixed;
	bottom:170px;
	right:30px;
	width: 64px;
	text-align: center;
	z-index: 99;
	display: none;
	a.icon{
		display: block;
		width: 64px;
		height: 64px;
		border-radius:50px;
		background-color: $zhutiColor;
		line-height: 60px;
		>i{
			font-size: 30px;
			color: #fff;
		}

	}
	p{
		font-size: 20px;
		color: rgba(255,255,255,0.8);
	}
}

body{
	padding-top:120px;
}



header#header{
	width: 100%;
	height: 120px;
	background-color: #fff;
	position: fixed;
	top:0;
	left:0;
	z-index:200;
	transition:all 0.3s;
}
div.HeadSearch{
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.7);
	z-index:99;
	display:none;
	div.form{
		float: right;
		width: 530px;
		padding-top:30px;
		padding-right:130px;
		position: relative;
		>input{
			width: 100%;
			height: 50px;
			border:2px solid $headFontColor;
			padding-left:15px;
			font-size: 18px;
			padding-right:15px;
		}
		div.but{
			width: 120px;
			line-height:50px;
			text-align: center;
			font-size: 18px;
			color: #fff;
			position: absolute;
			top: 30px;
			right: 0;
			background-color: $headFontColor;
			cursor: pointer;

		}
	}
}
.headerCon{
	height:100%;
	position: relative;
	a.logo{
		display: block;
		width: 350px;
		height: 100%;
		float: left;

	}
	nav.InOneNav{
		float: right;
		height: 100%;
		padding-top: 25px;
		ul.action{
			height: 30px;
			float: right;
			>li{
				width: 30px;
				height: 30px;
				float: left;
				margin-left: 17px;

				>a{
					display: block;
					width: 100%;
					height: 100%;
					line-height: 26px;
					border-radius: 50%;
					border:2px solid $headFontColor;
					text-align: center;

					>i{
						font-size: 14px;
						color: $headFontColor;
					}
				}
				>a:hover{
					border:2px solid #82b540;
					>i{
						color: #82b540;
					}
				}
			}
		}
		
		ul.navList{
			height: 50px;
			clear:both;
			>li{
				float: left;
				height: 100%;
				padding: 0 13px;

				>a{
					display: block;
					padding-top: 8px;
					width: 100%;
					height: 100%;
					text-transform:uppercase;
					line-height: 30px;
					font-size: 16px;
					position: relative;
					color: #555;
					// font-weight: bold;

				}
				
				>a:after{
					content: '';
					width: 100%;
					height: 3px;
					background-color: rgba(0,0,0,0);
					position: absolute;
					bottom: 12px;
					left: 0;
				}
			}
			>li:nth-last-child(1){
				padding: 0 0px 0 13px;
			}
			>li:hover , li.active{
				>a{
					color: $headFontColor;
				}
				>a:after{
					background-color: $headFontColor;
				}
			}
		}
	}

	div.naTwoWai{
		width: 925px;
		height: 0px;
		position: absolute;
		right: 0;
		top: 100%;
		z-index: 99;
		transition: all 0.3s;
		opacity: 0;
		overflow: hidden;
		box-shadow: 5px 5px 15px rgba(0,0,0,0.3);

	}
	div.active{
		height: 425px;
		opacity: 1;
	}
	ul.NavHDlst{
		width: 100%;
		height: 100%;
		// border-bottom:5px solid #efea5f;
		// border-left:5px solid #efea5f;
		// border-right:5px solid #efea5f;
		// border-top:5px solid rgba(0,0,0,0.2);
		background-color:#fff;
		border-radius: 0 0 4px 4px ;

		>li{
			width: 100%;
			height: 100%;
			display: none;
			div.LCn{
				width: 360px;
				height: 100%;
				text-align: center;
				padding:0 40px;
				float: left;
				div.head{
					font-size: 22px;
					font-weight: bold;
					color: #555555;
					text-transform:uppercase;
					line-height: 40px;

				}
				div.imgC{
					margin-top: 40px;
					>img{
						max-width: 100%;
					}

				}
				p{
					color:#999999;
					font-size: 12px;
					line-height: 22px;
					font-weight: bold;
				}
			}
			ul.naNoe{
				height: 100%;
				width: 325px;
				background-color:#cce1b1;
				padding-top:13px;
				float: left;

				>li{
					width: 100%;
					height: 32px;
					background-repeat:no-repeat;
					background-position: 95% center;
					>a{
						display: block;
						width: 100%;
						height: 100%;
						line-height: 32px;
						color: #555;
						font-size: 16px;
						padding-left:26px;

						overflow : hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;

					}
				}
				>li.active{
					background-color: #e0edd0;
				}
				>li.erjie{
					background-image:url(../images/but/navlR.png);
				}
			}
			ul.naTwo{
				height: 100%;
				width: 240px;
				background-color:#f0f6e7;
				padding-top:13px;
				float: left;
				>li{
					width: 100%;
					height: 100%;
					display: none;
					ul.naTwoN{
						>li{
							width: 100%;
							height: 32px;
							>a{
								display: block;
								width: 100%;
								height: 100%;
								line-height: 32px;
								color: #555;
								font-size: 16px;
								padding-left:26px;
								overflow : hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-line-clamp: 1;
								-webkit-box-orient: vertical;
							}
						}
						>li.active{
							background-color: #e0edd0;
						}
						>li:hover{
							background-color: #e0edd0;
						}
					}
				}
				
			}
		}
	}
	
}


section.InBanner{
	width: 100%;
	height:620px;
	background-color:#013c86;
	.swiper-container{
		width: 100%;
		height: 100%;
	}
	.swiper-pagination{
		>span{
			width: 10px;
			height: 10px;
			margin: 10px;
		}
		>span.swiper-pagination-bullet-active{
			background-color: $zhutiColor;
		}
		
	}

	div.banerWordCn{
		height: 100%;
		width: 1160px;
		position: absolute;
		top: 0;
		left: 50%;
		margin-left: -580px;
		color: #fff;
		.ani{
			position: absolute;
		}
		.ind1{
			top: 150px;
			left: 0;
			font-size: 60px;
			text-transform:uppercase;
			text-shadow: 2px 2px 8px rgba(0,0,0,1);

		}
		.ind2{
			top: 240px;
			left: 0;
			font-size: 38px;
			text-transform:uppercase;
			text-shadow: 2px 2px 8px rgba(0,0,0,1);

		}
		.ind3{
			top: 287px;
			left: 0;
			font-size: 16px;
			text-transform:uppercase;
			text-shadow: 2px 2px 8px rgba(0,0,0,1);

		}
		>a{
			position: absolute;
			top: 440px;
			left: 0;
			display: block;
			width: 200px;
			height: 50px;
			border:2px solid #fff;
			color: #fff;
			text-align: center;
			line-height: 46px;
			font-size: 20px;
			box-shadow:2px 2px 8px rgba(0,0,0,1);
		}

	}
}

h2.headerin{
	padding-top:60px;
	text-align:center;
	font-size:32px;
	color: #333;
	text-transform:uppercase;
	// font-weight: bold;
	>span{color: #82b540;}


}
p.headerinp{
	padding-top:70px;
	text-align:center;
	font-size:16px;
	color: #333;
	// text-transform:uppercase;
	// font-weight: bold;
	line-height:24px;

}
section.InWeDo{
	width: 100%;
	height:746px;
	background-image: url("../images/back/lifestyle_background.jpg");
	background-position: center center;
	// text-transform:uppercase;
	ul.navC{
		margin-top:30px;
		background-image: url("../images/back/bg-improvelifestyle.png");
		background-position: center center;
		width: 100%;
		height: 400px;
		position : relative;
		
		>li{
			width: 220px;
			height: 220px;
			border:2px solid $zhutiColor;
			border-radius: 50%;
			background-color:#fff;
			padding:16px;
			position: absolute;
			transition: all 0.5s ;
 			>a{
				background-color:$zhutiColor;
				display: block;
				width: 100%;
				height: 100%;
				border-radius: 50%;
				overflow: hidden;
				text-align: center;
				// font-weight: bold;
				 padding-top: 25px;
				color: #fff;
				div.icon{
					height: 50%;
					position: relative;
					div.cn{
						position: absolute;
						left: 0;
						bottom:0;
						width: 100%;
						>span{
							display: inline-block;
							padding-bottom: 5px;
							border-bottom:2px solid #fff;
						}
					}
					i{font-size:56px;line-height:56px;}
				}
				

			}	
		}
		>li.one{
			top: 185px;
			left: 85px;
		}
		>li.two{
			bottom: 100px;
			left: 460px;
		}
		>li.three{
			top: 10px;
			right: 70px;
		}
		>li:hover{
			width: 250px;
			height: 250px;
		}
	}
}



ul.ANNList{
	width: 100%;
	padding-top:20px;
	>li{
		margin-top: 30px;
		div.timeCom{
			float: left;
			font-size: 14px;
			color: #4d4d4d;
			padding-top:10px;
			transition: all 0.3s;
			font-weight: bold;

		}
		div.RigCon{
			float: right;
			width: 990px;
			margin-right: 20px;
			>a{
				display: block;
				>p{
					font-size: 26px;
					color: #323232;
					// font-weight: bold;
					transition: all 0.3s;
				}
				>span{
					color: #999;
					font-size: 14px;
					transition: all 0.3s;
				}
			}
		}
		a.bot{
			float: right;
			margin-right: 40px;
			width: 172px;
			height: 50px;
			background-color:$zhutiColor;
			text-align: center;
			font-size: 18px;
			color: #fff;
			line-height: 50px;
			transition: all 0.5s;
		}
		a.bot:hover{
			background-color:$tubHover;
		}
	}
	>li:hover{
		div.timeCom{
			color:$zhutiColor;
		}
		div.RigCon{
			>a{
				>p{
					color:$zhutiColor;
				}
				>span{
					color:$zhutiColor;
				}
			}
		}
	}
}


ul.newsList{
	width: 100%;
	padding-top:34px;
	>li{
		float: left;
		width: 366px;
		height: 306px;
		margin-left: 30px;
		>a{
			display: block;
			height: 100%;
			div.imgc{
				width: 100%;
				height: 245px;
				overflow: hidden;
				position: relative;
				div.hoverCn{
					width: 100%;
					height: 100%;
					background-color:rgba(0,0,0,0.7);
					line-height: 240px;
					text-align: center;
					position: absolute;
					top: 0;
					left: 0;
					transition: all 0.3s;
					transform: scale(0);
					>i{
						font-size: 40px;
						color: #fff;
					}
				}
				
				>img{
					width: 100%;
					transform: scale(1);
					transition: all 0.3s;

				}
			}
			div.imgc:hover{
				div.hoverCn{
					transform: scale(1);
				}
				>img{
					width: 100%;
					transform: scale(1.2);
				}
			}
			div.time{
				font-size: 16px;
				color: $zhutiColor;
				padding:10px 20px;
				font-weight: bold;

			}
			div.word{
				font-size: 14px;
				font-weight: bold;
				padding:0px 20px;
				display: -webkit-box;
				
				// overflow : hidden;
				// text-overflow: ellipsis;
				// -webkit-line-clamp: 3;
				// -webkit-box-orient: vertical;
			}

		}
	}
	>li:nth-child(1){margin-left:0;}
}

div.BotCon{
	width: 100%;
	padding-top:34px;

	a.bot{
		display: block;
		margin: 40px auto 0;
		width: 172px;
		height: 50px;
		background-color:$zhutiColor;
		text-align: center;
		font-size: 18px;
		color: #fff;
		line-height: 50px;
		transition: all 0.5s;

	}
	a.bot:hover{
		background-color:$tubHover;

	}
}

section.FIGURES{
	width: 100%;
	background-color:#fff;
	div.FIGURESCon{
		background-color:$zhutiColor;
		height: 310px;
		margin-top: 34px;
		ul.FIGURESlist{
			height: 100%;
			>li{
				padding-top:110px;
				float: left;
				width: 20%;
				height: 100%;
				color: #fff;
				text-align: center;
				background-color:$zhutiColor;
				transition: all 0.5s;
				div.came{
					font-size: 52px;
					font-weight: bold;

				}
				p.name{
					font-size: 18px;
					text-transform:uppercase;
					font-weight: bold;
				}
			}
			>li:hover{
				background-color:#5b9910;
			}
			>li:nth-child(2n){background-color:#5b9910;}
			>li:nth-child(2n):hover{background-color:$zhutiColor;}
		}
	}
}

section.photos{
	nav.photosNav{
		padding-top:34px;
		text-align: center;
		a{
			font-size: 16px;
			text-transform:uppercase;
			// font-weight: bold;
			margin:0 20px;
		}
		a.active{
			color: $zhutiColor;
		}
	}
	ul.photosCon{
		width: 100%;
		padding-top:34px;
		>li{
			width: 268px;
			height: 410px;
			float: left;
			margin-left: 29px;
			a{
				display: block;
				position: relative;
				img{
					transition: all 0.3s;
					transform: scale(1);
					width: 100%;

				}
				div.hoverCn{
					width: 100%;
					height: 100%;
					background-color:rgba(0,0,0,0.7);
					position: absolute;
					top: 0;
					left: 0;
					padding:35px 25px;
					opacity: 0;
					transition: all 0.3s;
					div.hed{
						color: #fff;
						font-size: 22px;
						text-transform:uppercase;
					}
					
					p{color: #fff}
					span{
						position: absolute;
						bottom:35px;
						right: 25px;
						display: block;
						border-right: 72px solid #81b441;
						border-top: 72px solid transparent;
						>i{
							position: absolute;
							bottom:10px;
							left: 40px;
							color: #fff;
							font-size: 20px;
						}
					}
				}
			}
			a.imgC{
				width: 100%;
				height: 100%;
				overflow: hidden;
			}
			a.imgT ,a.imgB{
				width: 100%;
				height: 190px;
				overflow: hidden;
				>img{
					height: 100%;
				}
			}
			a.imgB{
				margin-top: 30px;
			}
			a:hover{
				div.hoverCn{
					opacity: 1;
				}
				img{
					transform: scale(1.3);

				}
			}
		}
		>li:nth-child(1){margin-left:0;}
	}
}


section.RaV{
	background-color:#f1f1f1;
	padding-bottom:70px;
	div.STOCK ,div.VIDEO{
		width: 50%;
		float: left;
		div.neiC{
			padding-top:34px;
			div.word , img,{
				width: 100%;
				height: 310px;
			}
			div.word {
				background-color: #a7c581;
				padding:36px 54px;
				transition: all 0.5s;
				p{color: #fff;margin-top:20px;}
				p.p1{
					margin-top:0px;
					font-size: 28px;
					// font-weight: bold;
					text-transform:uppercase;
				}
				p.p2{
					margin-top: 100px;
					font-size: 28px;
					text-transform:uppercase;
					text-align: right;
				}
				p.p3{
					float: left;
					font-size: 38px;
					// text-align: right;
					font-weight: bold;

					
				}
				p.p4{
					font-size: 32px;
					text-align: right;
					
				}
			}
			div.word:hover{
				background-color: #7c9260;
			}
		}
	}
	div.STOCK {
		padding-right: 15px;
	}
	div.VIDEO {
		padding-left: 15px;
		.videoC{
			width: 100%;
			height: 310px;
			overflow: hidden;
			position: relative;
		}
		#indVideo{
			width: 100%;
			margin-top: -35px;
			
		}

		div.play{
			width: 100px;
			height: 100px;
			position: absolute;
			bottom: 36%;
			left: 50%;
			margin-left: -50px;
			background-color: rgba(0,0,0,0.3);
			border-radius:50%;
			background-image:url(../video/play.png);
			background-size: 100px 200px;
			background-position: 0 0px ;
			background-repeat: no-repeat;
			transition: all 0.1s;
			transform: scale(1);

		}
		div.active{
			bottom: -7%;
			left: 5%;
			background-color: rgba(255,255,255,0.3);
			background-position: 0 -100px ;
			transform: scale(0.5);



		}
	}
}

section.DOCUMENTS{
	padding-bottom:68px;
}
div.DOCUMENTSList{
	width: 100%;
	height:345px;
	padding: 34px 20px  0;
	div.DOCUL{
		width: 230px;
		height: 303px;
		padding-top:40px;
		text-align: center;
		margin-left: 1px;
		background-color: #fff;
		position: relative;
		border:1px solid $zhutiColor;
		z-index: 2;
		div.posback{
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
			width: 100%;
			height: 0;
			background-color: $zhutiColor;
			transition: all 0.3s;

		}
		div.head{
			font-size: 20px;
			color: #000;
			font-weight: bold;
			transition: all 0.3s;

		}
		div.icon{
			// margin-top: 55px;
			position: absolute;
			bottom:30px;
			left: 0;
			width: 100%;
			>i{
				font-size: 70px;
				color: $zhutiColor;	
				transition: all 0.3s;

			}
		}
		p{
			width: 100%;
			margin-top: 36px;
			padding:0 8px;
			color: #999;
			word-wrap: break-word;
			transition: all 0.3s;


		}
		
	}
	div.DOCUL:hover{
		div.posback{
			height: 100%;
		}
		div.head{
			color: #fff;
		}
		div.icon{
			>i{
				color: #fff;	
			}
		}
		p{
			color: #fff;
		}
		
	}
}
.nextDOCUM{
	background-image:url(../images/but/bcg_r.png);
	right: 1px;
	width: 30px;
	height:30px;
}
.prevDOCUM{
	background-image:url(../images/but/bcg_l.png);
	left: 1px;
	width: 30px;
	height:30px;

}



section.Links{
	background-image:url(../images/back/buttom.jpg);
	height:440px;
	background-position:0 0 ;
	div.LinksN{
		width: 100%;
		height: 100%;
		background-color: rgba(139,165,106,0.5);

	}
}
.ButLogo{
	padding:60px 100px 0;
	position: relative;
}
.ButLogoListN{
	width: 100%;

	img{
		display: block;
		width: 188px;
		height: 71px;
		margin:0 auto;
	}
}

.nextButLogo{
	background-image:url(../images/but/bcg_r2.png);
	top:55%;
	right: 0px;
	width: 60px;
	height:90px;
	background-size: 100% 100%;
}
.prevButLogo{
	background-image:url(../images/but/bcg_l2.png);
	top:55%;
	left: 0px;
	width: 60px;
	height:90px;
	background-size: 100% 100%;
}



section.FengXiang{
	width: 100%;
	padding:20px  0;
	background-color:#363636;
	div.FengXiangCn{
		text-align: center;
		>a{
			display: inline-block;
			width: 36px;
			height: 36px;
			margin:0 135px;
			background-position: 0 0;
			background-size:36px 72px;
			background-repeat: no-repeat;
		}
		>a:nth-child(1){background-image: url("../images/shejiao/facebook.png");}
		>a:nth-child(2){background-image: url("../images/shejiao/twitter.png");}
		>a:nth-child(3){
			background-image: url("../images/shejiao/weixin.png");
			position: relative;
			>img{
				width: 150px;
				height: 150px;
				position: absolute;
				top: 0;
				left: 60px;
				display: none;
			}
			}
			>a:nth-child(3):hover{
				>img{
					display: block;
				}
			}
		>a:hover{background-position: 0 -36px;}
	}
}

footer.inFooter{
	width: 100%;
	background-color:#222222;
	padding-top:40px;
	div.metaCn{
		line-height: 64px;
		color: #8c8d8f;
		font-size: 14px;
		text-align: center;
	}
	ul.footNavC{
		color: #fff;
		padding-bottom:70px;
		padding-right:160px;
		// border-bottom:1px solid #333333;
		li{
			float: left;
			width: 25%;
			div.head{
				font-size: 22px;

			}
			>a{
				display: block;
				color: #fff;
				font-size: 14px;
				margin-top: 14px;

				>i{
					margin-right: 6px;
				}
			}
			>a:hover{color: $zhutiColor;}
		}
	}
	div.linkCn{
		padding-top:20px;
		text-align: right;
		>a{
			color: #fff;
			font-size: 14px;
			// margin: 0 15px;
			line-height:18px;
			border-left:2px solid #fff;
			display: inline-block;
			padding: 0 15px;

		}
		>a:hover{
			color: $zhutiColor;

		}
		>a:nth-child(1){border-left:0px;}
	}
	div.fenxiaang{
		text-align: right;
		padding: 30px 0;
		>a{
			display: inline-block;
			width: 36px;
			height: 36px;
			margin:0 24px;
			background-position: 0 0;
			background-size:36px 72px;
			background-repeat: no-repeat;
		}
		>a:nth-child(1){background-image: url("../images/shejiao/facebook.png");}
		>a:nth-child(2){background-image: url("../images/shejiao/twitter.png");}
		>a:nth-child(3){
			background-image: url("../images/shejiao/weixin.png");
			position: relative;
			>img{
				width: 150px;
				height: 150px;
				position: absolute;
				top: 0;
				left: 60px;
				display: none;
			}
			}
			>a:nth-child(3):hover{
				>img{
					display: block;
				}
			}
		>a:hover{background-position: 0 -36px;}
	}

	.metaCn{
		text-align: right;
		font-size: 12px;
		color: #999;
	}
}

.PhotosFrame{
	width: 100%;
	height:100%;
	background-color: rgba(0,0,0,0.7);
	position: fixed;
	top:0;
	left:0;
	z-index:999;
	display:none;
	.nextFrame ,.prevFrame{
		width: 65px;
		height: 65px;
		border-radius:50%;
		position: absolute;
		top: 50%;
		margin-top:-32px;
		background-repeat:no-repeat;
		opacity: 0.7;
	}
	.nextFrame{
		background-image:url(../images/but/lightbox-arrow-left.png);
		left: 40px;
	}	
	.prevFrame{
		background-image:url(../images/but/lightbox-arrow-right.png);
		right:40px;
	}
	#ExitPhotosFrame{
		width: 65px;
		height: 65px;
		border-radius:50%;
		position: absolute;
		top: 10px;;
		right: 20px;
		background-repeat:no-repeat;
		background-image:url(../images/but/lightbox-close.png);
		opacity: 0.7;

	}
	.nextFrame:hover ,.prevFrame:hover ,#ExitPhotosFrame:hover{
		transition: all 0.5s;
		opacity: 1;

	}
	div.imgCon{
		position: absolute;
		top: 50px;
		left: 120px;
		right: 120px;
		bottom:50px;
		transform: scale(0);
		opacity: 0;
		transition: all 0.3s;

		div.imc{
			width: 100%;
			height: 100%;
			display:table;
			text-align:center;
			span{
				display:table-cell;
				vertical-align:middle;
				>img{
					max-height: 100%;
					max-width: 100%;
					border-radius:6px;
					border:5px solid #fff;
				}
			}
		}


	}
	div.active{
		transform: scale(1);
		opacity: 1;
	}
}

section.FoxProBanner{
	background-image:url(../images/back/fuyebank.jpg);
	height:230px;
	padding-top:35px;
	text-align:center;
	div.head{
		font-size: 38px;
		color: #fff;
		line-height: 80px;
		// font-weight: bold;
		text-transform: uppercase;
	}
	div.line{
		width: 100%;
		>span{
			display: inline-block;
			width: 95px;
			height: 5px;
			background-color:$headFontColor;
		}
	}
	div.lujin{
		color: #fff;
		padding-top:15px;
		>a{
			font-size: 14px;
			text-transform: uppercase;
			color: #fff;
			cursor: default;
		}
	}
}


div.BotConPub{
	width: 100%;
	text-align:right;
	padding-right:40px;
	>a.bot{
		display:  inline-block;
		width: 172px;
		height: 50px;
		background-color: $zhutiColor;
		text-align: center;
		font-size: 18px;
		color: #fff;
		line-height: 50px;
		transition: all 0.5s; 

	}
	a.bot:hover{
		background-color:$tubHover;
	}
}

section.ANNOUNCEMENTS{
	padding-bottom:40px;
}
section.News{
	background-color:#f1f1f1;
	padding-bottom:40px;

}